<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏房间</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_room.css">
</head>
<body id="body">
<div class="nav">
    <img src="image/touxiang.png" alt="">
    <span>五子棋对战房间</span>
</div>

<div class="container">
    <div>
        <!-- 棋盘区域, 需要基于 canvas 进行实现 -->
        <!-- canvas 标签有一组配套的canvas API，通过这些API就可以实现一些画画的效果，如棋盘就是在上面画很多直线，棋子就是画一个圆圈再填充颜色 -->
        <canvas id="chess" width="450px" height="450px">

        </canvas>
        <!-- 显示区域 -->
        <div id="screen"> 等待玩家连接中...</div>
    </div>
</div>
<!-- 直接引入棋盘，不自己深究 -->
<script src="js/script.js"></script>

<style>
    #body {
        background-image: url("image/wuziqi.png");
        background-size: 100% 100%;
        background-attachment: fixed;
    }
</style>
</body>
</html>